<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 添加饮食记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保容器不溢出 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 优化横向滚动区域 */
        .overflow-x-auto {
            scrollbar-width: thin;
            -ms-overflow-style: none;
        }
        .overflow-x-auto::-webkit-scrollbar {
            height: 4px;
        }
        .overflow-x-auto::-webkit-scrollbar-thumb {
            background-color: rgba(156, 163, 175, 0.5);
            border-radius: 2px;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="index.html" class="mr-3">
                    <i class="fas fa-arrow-left text-gray-600"></i>
                </a>
                <h1 class="text-xl font-bold text-green-600">添加饮食记录</h1>
            </div>
            <button class="px-4 py-1 bg-green-600 text-white rounded-full text-sm">保存</button>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6 mb-20">
        <!-- 日期和餐次选择 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <i class="fas fa-calendar-alt text-green-600 mr-2"></i>
                    <span>日期</span>
                </div>
                <div class="flex items-center">
                    <span>2023年5月15日</span>
                    <i class="fas fa-chevron-right text-gray-400 ml-2"></i>
                </div>
            </div>
            
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-clock text-green-600 mr-2"></i>
                    <span>时间</span>
                </div>
                <div class="flex items-center">
                    <span>12:30</span>
                    <i class="fas fa-chevron-right text-gray-400 ml-2"></i>
                </div>
            </div>
        </div>
        
        <!-- 餐次选择 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <h2 class="text-base font-medium mb-3">选择餐次</h2>
            <div class="grid grid-cols-4 gap-3">
                <div class="bg-yellow-50 border-2 border-yellow-500 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-coffee text-yellow-600 mb-1"></i>
                    <span class="text-sm">早餐</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-apple-alt text-gray-500 mb-1"></i>
                    <span class="text-sm">上午加餐</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-utensils text-gray-500 mb-1"></i>
                    <span class="text-sm">午餐</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-cookie text-gray-500 mb-1"></i>
                    <span class="text-sm">下午茶</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-moon text-gray-500 mb-1"></i>
                    <span class="text-sm">晚餐</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-glass-whiskey text-gray-500 mb-1"></i>
                    <span class="text-sm">夜宵</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-blender text-gray-500 mb-1"></i>
                    <span class="text-sm">加餐</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-3 flex flex-col items-center">
                    <i class="fas fa-ellipsis-h text-gray-500 mb-1"></i>
                    <span class="text-sm">其他</span>
                </div>
            </div>
        </div>
        
        <!-- 搜索添加食物 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex items-center mb-4">
                <input type="text" placeholder="搜索或扫码添加食物" class="flex-1 bg-gray-100 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-green-500 mr-2">
                <button class="p-2 bg-gray-100 rounded-full">
                    <i class="fas fa-camera text-gray-600"></i>
                </button>
            </div>
            
            <!-- 最近添加的食物 -->
            <h3 class="text-sm text-gray-500 mb-2">最近添加的食物</h3>
            <div class="flex overflow-x-auto pb-2 space-x-3">
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb" alt="苹果" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">苹果</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1615485290382-441e4d049cb5" alt="鸡胸肉" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">鸡胸肉</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff" alt="全麦面包" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">全麦面包</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9" alt="牛奶" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">牛奶</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1459411621453-7b03977f4bfc" alt="燕麦" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">燕麦</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 flex flex-col items-center w-16 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf" alt="鸡蛋" class="w-10 h-10 object-cover rounded-full mb-1">
                    <span class="text-xs">鸡蛋</span>
                </div>
            </div>
        </div>
        
        <!-- 已添加食物列表 -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold mb-3">已添加食物</h2>
            
            <!-- 食物条目1 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff" alt="全麦面包" class="w-12 h-12 object-cover rounded-lg mr-3">
                        <div>
                            <h3 class="font-medium">全麦面包</h3>
                            <p class="text-xs text-gray-500">100g / 260千卡</p>
                        </div>
                    </div>
                    <button class="text-red-500">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-600">
                        <span>份量: 50g</span>
                        <span class="mx-2">|</span>
                        <span>共130千卡</span>
                    </div>
                    <div class="flex items-center">
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-minus text-gray-600"></i>
                        </button>
                        <span class="mx-3">1</span>
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-plus text-gray-600"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 食物条目2 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf" alt="鸡蛋" class="w-12 h-12 object-cover rounded-lg mr-3">
                        <div>
                            <h3 class="font-medium">鸡蛋</h3>
                            <p class="text-xs text-gray-500">1个 / 70千卡</p>
                        </div>
                    </div>
                    <button class="text-red-500">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-600">
                        <span>份量: 1个</span>
                        <span class="mx-2">|</span>
                        <span>共70千卡</span>
                    </div>
                    <div class="flex items-center">
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-minus text-gray-600"></i>
                        </button>
                        <span class="mx-3">1</span>
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-plus text-gray-600"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 食物条目3 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9" alt="牛奶" class="w-12 h-12 object-cover rounded-lg mr-3">
                        <div>
                            <h3 class="font-medium">全脂牛奶</h3>
                            <p class="text-xs text-gray-500">100ml / 65千卡</p>
                        </div>
                    </div>
                    <button class="text-red-500">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-600">
                        <span>份量: 200ml</span>
                        <span class="mx-2">|</span>
                        <span>共130千卡</span>
                    </div>
                    <div class="flex items-center">
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-minus text-gray-600"></i>
                        </button>
                        <span class="mx-3">1</span>
                        <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-plus text-gray-600"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 添加更多食物按钮 -->
            <button class="w-full border border-dashed border-gray-300 rounded-lg py-4 flex items-center justify-center text-gray-500 hover:bg-gray-50">
                <i class="fas fa-plus mr-2"></i>
                <span>添加更多食物</span>
            </button>
        </div>
        
        <!-- 营养素统计 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-semibold mb-3">营养素统计</h2>
            
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span>总热量</span>
                <span class="font-medium text-green-600">330 千卡</span>
            </div>
            
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span>蛋白质</span>
                <span>15.2 g</span>
            </div>
            
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span>碳水化合物</span>
                <span>38.5 g</span>
            </div>
            
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span>脂肪</span>
                <span>11.3 g</span>
            </div>
            
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
                <span>膳食纤维</span>
                <span>3.6 g</span>
            </div>
            
            <div class="flex justify-between items-center py-2">
                <span>糖</span>
                <span>8.2 g</span>
            </div>
            
            <button class="mt-3 text-green-600 flex items-center">
                <span>查看更多营养素</span>
                <i class="fas fa-chevron-down ml-1"></i>
            </button>
        </div>
    </main>

    <!-- 底部固定按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
        <button class="w-full bg-green-600 text-white rounded-lg py-3 flex items-center justify-center font-medium">
            保存记录
        </button>
    </div>
</body>
</html> 